<template>
  <div>
    <el-dialog
      title="聊天记录"
      :visible.sync="isShow"
      width="40%">
      <div>
        <div class="flex_box userinfo">
          <img :src="avatar" alt="" class="avatar">
          <span>宋春波</span>
        </div>
        <div class="search_box">
          <div class="search flex_box">
            <span class="iconfont icon-sousuo"></span>
            <input type="text" class="ipt">
          </div>
        </div>
        <div class="flex_box list_box">
          <div class="flex1 list">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
              <el-menu-item index="1">全部</el-menu-item>
              <el-menu-item index="2">文件</el-menu-item>
              <el-menu-item index="3">图片及视频</el-menu-item>
              <el-menu-item index="4">链接</el-menu-item>
            </el-menu>
            <div class="content" v-if="activeIndex==1">
              <el-scrollbar style="height:100%">
                <div class="list_item" v-for="item in 10">
                  <img :src="avatar" alt="" class="avatar">
                  <div class="userinfo">
                    <span>宋春波</span>
                    <p class="text">嗯嗯</p>
                  </div>
                </div>
              </el-scrollbar>
            </div>
            <div class="content" v-else-if="activeIndex==2">
              <p class="nodata">没有找到相关记录</p>
            </div>
            <div class="content" v-else-if="activeIndex==3">
              <p class="nodata">没有找到相关记录</p>
            </div>
            <div class="content" v-else-if="activeIndex==4">
              <p class="nodata">没有找到相关记录</p>
            </div>
          </div>
          <!-- <div class="other_search">
            <h1>添加筛选条件</h1>
          </div> -->
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      avatar:require('@/assets/images/avatar.jpg'),
      isShow:false,
      activeIndex:'1'
    }
  },
  methods:{
    show() {
      this.isShow = true
    },
    hide() {
      this.isShow = false
    },
    handleSelect(val) {
      this.activeIndex = val
    }
  }
}
</script>

<style lang='stylus' scoped>
  .userinfo
    align-items: center
    justify-content: center
    font-size 14px
    color #999
    .avatar
      width: 36px
      height: 36px
      border-radius: 4px
      margin-right 10px
  .search_box
    border-bottom 1px solid #eee
    .search
      width 100%
      height: 40px
      padding 0 10px
      background #f4f4f4
      box-sizing: border-box
      align-items: center
      margin 10px 0
      border-radius: 4px
      .iconfont
        color #666
        font-size: 16px
        margin-right: 10px
      .ipt
        flex 1
        min-width: 0
        height: 100%
        color #666
        font-size: 14px
        background: transparent
        outline: none
      ::-webkit-input-placeholder
        color: #666;
        font-size: 14px;
  .list_box
    height: 400px
    .list
      height: 100%
      display: flex
      flex-direction: column
      .content
        flex 1
        min-height: 0
        overflow hidden
      .list_item
        padding 10px
        background #f4f4f4
        margin-bottom: 5px
        display: flex
        align-items: center
        .avatar
          width: 32px
          height: 32px
          border-radius: 4px
          margin-right 10px
        .userinfo
          line-height: 20px
      .nodata
        height: 100%
        display flex
        align-items: center
        justify-content: center
    .other_search
      width: 200px
      height: 100%
      border-left: 1px solid #eee
      padding 20px
      box-sizing border-box
</style>